<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section">
        <div class="rs-button01">
          <span>按钮</span>
        </div>
        <div class="rs-button01">
          <span>自动宽按钮</span>
        </div>
      </div>
      <h3 class="app-page-h3-title">
        rs-button02定宽定高按钮
      </h3>
      <div class="app-section">
        <div class="rs-button02">
          <span>按钮</span>
        </div>
        <div class="rs-button02">
          <span>定宽定高按钮</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 自动宽按钮
.rs-button01 {
  display: inline-block;
  cursor: pointer;
  background-color: #409eff;
  border: 1px solid #409eff;
  line-height: 1;
  border-radius: 4px;
  padding: 12px 20px;

  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  transition: 0.1s;
  &:hover {
    background: #1d88f3;
    border-color: #1d88f3;
    color: #fff;
  }
}
// 定宽定高按钮
.rs-button02 {
  display: inline-block;
  cursor: pointer;
  width: 100px;
  height: 40px;
  background-color: #409eff;
  border: 1px solid #409eff;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;

  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  transition: 0.1s;
  &:hover {
    background: #1d88f3;
    border-color: #1d88f3;
    color: #fff;
  }
}
</style>
